<template>
  <section class="order-detail">
    <nav-bar>
      <div class="center" slot="center">订单详情</div>
    </nav-bar>
    <scroll class="scroll">
      <order-detail-upper
        :doc="snapshot._doc"
        @handleSkipOrderDetail="handleSkipOrderDetail"
      />
      <order-detail-good
        :doc="snapshot._doc"
        @handleSkipOrderDetail="handleSkipOrderDetail"
      />
      <order-detail-footer :snapshot="snapshot" />
    </scroll>
  </section>
</template>

<script>

import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/betterScroll/Scroll";

import OrderDetailUpper from "./childComps/OrderDetailUpper";
import OrderDetailGood from "./childComps/OrderDetailGood";
import OrderDetailFooter from "./childComps/OrderDetailFooter";

import { mapGetters } from "vuex";
export default {
  props: {
    snapshot: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters(["geohash"]),
  },
  methods: {
    handleSkipOrderDetail() {
      this.$router.push({
        path: "/shop",
        query: {
          geohash: this.geohash,
          id: this.snapshot._doc.restaurant_id,
        },
      });
    },
  },
  components: {
    NavBar,
    Scroll,
    OrderDetailUpper,
    OrderDetailGood,
    OrderDetailFooter,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.order-detail {
  .initial-children();
  background-color: #f1f1f1;
  z-index: 1;
  .scroll {
    height: calc(100% - 44px);
    overflow: hidden;
  }
}
</style>